<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;height: 56px;">
			<el-form :inline="true">
				<el-form-item>
					<el-button type="warning" @click="fnOpenExpenses">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		
		<!--权限列表-->
		<el-table :data="expenses" border v-loading="expensesLoading" class="expenses-list">
			<el-table-column type="index" label="#" width="60">
			</el-table-column>
			<el-table-column prop="Price" label="餐费">
			</el-table-column>
			<el-table-column prop="Unit" label="单位">
			</el-table-column>
			<el-table-column label="操作" width="65">
				<template scope="scope">
				    <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
				      	<el-button type="danger" size="mini" icon="custom-delete"  @click="fnDelete(scope.row.ID)"></el-button>
				    </el-tooltip>
				</template>
			</el-table-column>
		</el-table>
		
		<!--新增界面-->
		<el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="100px" ref="addForm">
				<el-form-item label="餐费（元）">
					<el-input v-model="addForm.price" placeholder="请输入餐费" style="width: 200px;"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="fnAddExpenses">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
    import Svc from '../../service/index.js'
    import moment from 'moment'
	export default {
		data() {
			return {
				expenses : [], //餐费列表
				expensesLoading : false,
				//新增内容
				addForm : {
					price : 0
				},
				addFormVisible : false
			}
		},
		methods: {
			//显示message提示框
            openMessage(msg,type){
    	        this.$message({
		          	showClose: true,
		          	message: msg,
		          	type: type
		        });
		    },
		    //格式化 -> 类型
		    fnGroupFormat(row, column){
		    	var that = this
                var val = row[column.property];
	          	return val + "元"; 
		    },
		    //获取所有餐费
		    fnGetExpenses(){
		    	var that = this
		    	that.expensesLoading = true
	            Svc.fnGetData('/api/setting/price/list',{},function(res){
	            	if (res.body.ErrCode == 0){
	            		that.expenses = res.body.Data
	            		that.expensesLoading = false
	            	} else {
	            		that.openMessage("餐费列表获取失败！",'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
	            })
		    },
		    //打开新增页面
		    fnOpenExpenses(){
		    	var that = this
		    	that.addForm.price = ''
		    	that.addFormVisible = true
		    },
	      	//新增
	      	fnAddExpenses(){
	      		var that = this
		    	var params = {
		    		Price : parseInt(that.addForm.price),
    				Unit : '元'
		    	}
		    	
	            Svc.fnPostData('/api/setting/price/save',params,function(res){
	            	if (res.body.ErrCode == 0){
	            		that.addFormVisible = false
	            		that.openMessage("新增操作成功！",'success')
	            		that.fnGetExpenses()
	            	} else {
	            		that.openMessage("新增操作失败！" + res.body.ErrMsg,'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
	            })
		    },
		    //删除
		    fnDelete(id){
		    	var that = this
		    	that.$confirm('您确认删除本条记录吗？', '提示', {
					type: 'warning'
				}).then(function(){
					Svc.fnPostData('/api/setting/price/remove',{ID:id},function(res){
		            	if (res.body.ErrCode == 0){
		            		that.openMessage("删除操作成功！",'success')
		            		that.fnGetExpenses()
		            	} else {
		            		that.openMessage("删除操作失败！",'error')
		            	}
		            },function(res){
		            	that.openMessage("网络错误，请重新！",'error')
		            })
				})
		    }
		},
		mounted() {
		    //获取所有餐费
		    this.fnGetExpenses()
		}
	}

</script>

<style scoped>
	.expenses-list{
		width: 100%;
		margin-top: 20px;
	}

	.toolbar {
	    background: #f2f2f2;
	    padding: 10px;
	    margin: 10px 0;
	}
</style>